<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          crossorigin="anonymous">
    <link rel="stylesheet" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" th:href="@{/css/letter.css}"/>
    <title>通知详情</title>
</head>
<body>
<div class="nk-container">
    <!-- 头部 -->
    <header class="bg-dark sticky-top" th:replace="index::header">
    </header>

    <!-- 内容 -->
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-8">
                    <h6><b class="square"></b> 系统通知</h6>
                </div>
                <div class="col-4 text-right">
                    <button type="button" class="btn btn-secondary btn-sm"
                            th:onclick="|location.href='@{/message/inform}';|">返回
                    </button>
                </div>
            </div>

            <!-- 通知列表 -->
            <ul class="list-unstyled mt-4">
                <li class="media pb-3 pt-3 mb-2 border-bottom" th:each="informMap:${informList}">
                    <input type="hidden" th:value="${informMap.messageId}">
                    <a th:href="@{|/user/profile/${informMap.sourceUser.id}|}">
						<img th:src="${informMap.sourceUser.headerUrl}" class="mr-4 rounded-circle user-header" alt="用户头像">
					</a>
                    <div class="media-body show d-lg-block" role="alert" aria-live="assertive" aria-atomic="true"
                         th:if="${informMap.topic!='follow'&&informMap.topic!='inform'}">
                        <h6 th:class="|mt-0 mb-3 ${informMap.targetComment==null && informMap.sourceComment==null?'big-bottom':''}|" style="font-size: 15px">
                            <a th:href="@{|/user/profile/${informMap.sourceUser.id}|}" th:utext="${loginUser.id==informMap.sourceUser.id?'你':informMap.sourceUser.username}" style="font-weight: bold">落基山脉下的闲人</a>
                            <i th:text="${informMap.topic=='like'?'赞了你的':'回复了你的'}"></i><i th:text="${informMap.targetComment!=null?'评论':'帖子'}"></i>
                            <a th:href="@{|/discuss/detail/${informMap.post.id}|}"
                               th:if="${informMap.targetComment==null}"
                               style="text-decoration: underline"
                               th:utext="|${#strings.length(informMap.post.title)>20?#strings.substring(informMap.post.title,0,20)+'...':informMap.post.title}|"></a>
                            &nbsp;&nbsp;<a class="text-primary"
                                           th:href="@{|/discuss/detail/${informMap.post.id}|}">查看详情</a>
                            <button type="button" class="ml-2 mb-1 ordinary-up close" data-dismiss="toast"
                                    aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <small class="float-right text-muted font-size-12"
                                   th:text="${#dates.format(informMap.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-25
                                15:49:32</small>
                        </h6>
                        <div th:class="|text-muted font-size-14 ${informMap.topic=='comment'?'float-right':''}|" th:if="${informMap.targetComment!=null}">
                            <span style="font-weight: lighter;font-style: italic;"
                                  th:utext="|${#strings.length(informMap.targetComment.content)>50?#strings.substring(informMap.targetComment.content,0,50)+'...':informMap.targetComment.content}|"></span>
                        </div>
                        <div th:if="${informMap.sourceComment!=null}">
                            <span th:if="${informMap.topic=='comment'}"
								  th:utext="|${#strings.length(informMap.sourceComment.content)>50?#strings.substring(informMap.sourceComment.content,0,50)+'...':informMap.sourceComment.content}|"></span>
                        </div>
                    </div>
                    <div class="media-body show d-lg-block" role="alert" aria-live="assertive" aria-atomic="true"
                         th:if="${informMap.topic=='follow'||informMap.topic=='inform'}">
                        <div class="toast-body">
                            <a th:if="${informMap.topic=='follow'}" th:href="@{|/user/profile/${informMap.sourceUser.id}|}"><i
                                    th:utext="${informMap.sourceUser.username}" style="font-weight: bold">落基山脉下的闲人</i>
                                偷偷关注了你，快来看看吧~ </a>
                            <a th:if="${informMap.topic=='inform'}" th:href="@{|/discuss/detail/${informMap.post.id}|}"><i
                                    th:utext="${informMap.sourceUser.username}" style="font-weight: bold">落基山脉下的闲人</i>
                                发布了新的文章 <span style="text-decoration: underline" th:utext="|${#strings.length(informMap.post.title)>20?#strings.substring(informMap.post.title,0,20)+'...':informMap.post.title}|"></span>，快来看看吧~ </a>
							<button type="button" class="ml-2 mb-1 close ordinary-up" data-dismiss="toast" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
                            <small class="float-right text-muted font-size-12" th:text="${#dates.format(informMap.createTime,'yyyy-MM-dd HH:mm:ss')}">
								2019-04-25 15:49:32
							</small>
                        </div>
                    </div>
                </li>

            </ul>
            <!-- 分页 -->
            <nav class="mt-5" th:replace="index::page">
            </nav>
        </div>
    </div>

    <!-- 尾部 -->
    <footer class="bg-dark" th:replace="index::footer">
    </footer>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/letter.js}"></script>
</body>
</html>
